<template>
  <div class="list" ref="wrapper">
    <div>
    <h2>热门城市</h2>
    <ul class="hot-list">
      <li v-for="item of hotCities" :key="item.id">
        <a href>{{item.name}}</a>
      </li>
    </ul>
    <h2>字母排序</h2>
    <ul class="zimu-list">
      <li v-for="(item,key) of cities" :key="key">
        <a href>{{key}}</a>
      </li>
    </ul>
    <div v-for="(item,key) of cities" :key="key">
      <h2>{{key}}</h2>
      <ul class="hot-list">
        <li v-for="inner of item" :key="inner.id">
          <a href>{{inner.name}}</a>
        </li>
      </ul>
    </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: "cityList",
  props: {
    cities: Object,
    hotCities: Array
  },
  mounted(){
    this.scroll=new Bscroll(this.$refs.wrapper)
  }
};
</script>

<style lang="stylus" scoped>
.list
  overflow: hidden
  position: absolute
  top: 2.3rem
  left: 0
  right: 0
  bottom: 0
.list h2 {
  font-size: 0.24rem;
  // margin: 0.24rem 0.3rem;
  padding .2rem
  background-color:#f5f5f5;
}

.hot-list {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
}

.hot-list:before {
  width: 33%;
  left: 33%;
  content: '';
  position: absolute;
  height: 100%;
  border-left: 0.02rem solid #ddd;
  border-right: 0.02rem solid #ddd;
}

.hot-list li {
  width: 33.3%;
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.28rem;
  text-align: center;
  border-bottom: 0.02rem solid #ddd;
  margin-bottom: -1px;
  float: left;
  position: relative;
  z-index: 10;
  color: #212121;
}

.hot-list li a {
  color: #212121;
}

.zimu-list {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background-color: #fff;
  padding: 0.3rem 0;
}

.zimu-list li {
  width: 16.66%;
  height: 0.9rem;
  line-height: 0.9rem;
  font-size: 0.28rem;
  text-align: center;
  float: left;
  position: relative;
  z-index: 10;
  color: #212121;
}

.zimu-list li a {
  color: #212121;
}
</style>